<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 一、生命周期：从Vue实例创建、运行、到销毁期间总是伴随着各种各样的事件，这些事件统统称为生命周期 -->
    <!-- 二、生命周期钩子（生命周期函数、生命周期事件） 
        每个Vue实例对象在被创建的时候都要经过一系列的初始化过程
        例如：设置数据监听、编译模版、将实例挂载到DOM元素中，并且数据变化实时更新DOM，
        在这些操作的过程中，就会运行生命周期函数，这也给了用户在不同阶段添加代码的机会
     -->

     <!-- 三、生命周期函数
        1.创建前后：beforeCreate created
        2.挂载前后: beforeMounte mounted
        3.更新前后: beforeUpdate updated
        4.销毁前后: beforeDestroye destroyed
     -->

     <div id="app">
        {{message}}
     </div>

     <script src="./vue.js"></script>
     <script>
        let app=new Vue({
            el:"#app",
            data:{
                message:123
            },
            methods:{

            },
            // 1.创建前：在vue实例对象初始化之后，但是在数据监听或者事件监听之前调用
            // 简单来说，就是在页面创建之前进行调用，此时还没有初始化data和methods属性
            beforeCreate(){
                console.log("创建前~~");
            },
            // 2.创建后
            // Vue实例对象已经完成对选项的处理，意味着数据监听、计算属性、方法、事件的回调函数都已经配置完毕
            // 但是el元素还不能用
            created(){
                console.log("创建后~~");
            },
            // 3.挂载前
            // Vue解析模板，在内存中生成虚拟DOM，但是页面还不能显示解析好的内容
            beforeMount(){
                console.log("挂载前~~");
            },
            // 4.挂载后
            //  这是虚拟DOM转为真实DOM，挂载Vue实例对象的元素已经被渲染到文档中，可以进行相关操作
            mounted(){
                console.log("挂载后~~");
            },
            // 5.更新前
            // 此时data里面的数据是最新的，但是页面上显示的数据是旧的，因为还没有开始重新渲染DOM
            beforeUpdate(){
                console.log("更新前~~");
            },
            // 6.更新后
            // 此时data里面的数据和页面显示的数据都是最新的
            updated(){
                console.log("更新后~~");
            },
            // 7.销毁前
            // 在实例对象被销毁之前调用
            beforeDestroy(){
                console.log("销毁前~~");
            },
            // 8.销毁后
            // 在实例对象被销毁之后调用
            destroyed(){
                console.log("销毁后~~");
            }
        })

        setTimeout(function(){
            app.message=555;

        },5000);
        setTimeout(function(){
            // 销毁实例对象
            app.$destroy();
        },8000);

     </script>

</body>
</html>